<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ComfyUI-Liebs-Toast Options</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
          crossorigin="anonymous">
    <link rel="stylesheet"
          href="bootstrap.css">
    <link rel="stylesheet"
          href="options.css">
  </head>
  <body>
    <form class="was-validated" id="options-form" novalidate>
      <div class="container">
        <h4>ComfyUI-Liebs-Toast Options</h4>
        <table id="comfy-domains" class="table">
          <thead>
            <tr>
              <th class="patterns">ComfyUI Domain Match Pattern</th>
              <th class="actions"></th>
            </tr>
          </thead>
          <tbody id="comfy-domain-list"></tbody>
        </table>  
        <div class="form-row">
          <div class="form-group col-md-12">
            <button class="btn btn-secondary" type="button" id="add-comfy-domain">
              Add ComfyUI Domain
            </button>
          </div>
        </div>

        <hr>

        <div class="form-row">
          <!-- save button-->
          <div class="form-group col-md-3">                
            <button class="btn btn-primary" type="submit">
              Save
            </button>
          </div>
          <!-- backup and restore buttons -->
          <div class="form-group col-md-9 text-right">                
            <button id="backup-settings" class="btn btn-secondary" type="button">
              Backup Settings
            </button>
            <label class="btn btn-secondary btn-file restore-settings">
              Restore Settings
              <input id="restore-settings" type="file" accepts="*.json"></input>
            </label>
          </div>
        </div>
    </form>

    <!-- domain template -->
    <template id="comfy-domain-template">
      <tr>
        <td>
          <input class="form-control" type="text" name="pattern" placeholder="http://example.com/*" required></input>
        </td>
        <td>
          <button class="btn btn-sm btn-secondary delete" type="button" title="Delete">
            <i class="fas fa-trash"></i>
          </button> 
        </td>
      </tr>
    </template>

    <script src="/options/options.js" type="text/javascript"></script>
  </body>
</html>
